<template>
  <!-- 精选题库 -->
  <div class="container">
    <el-card class="box-card">
      <div class="btn_wrapper">
        <span class="remark">说明：目前支持学科和关键字条件筛选</span>
        <el-button
          type="success"
          class="sbtn"
          @click="$router.push('/questions/new')"
          >新增试题</el-button
        >
      </div>
      <!-- 表单 -->
      <el-form ref="form" :model="form" label-width="80px" >
        <el-row :gutter="20">
          <el-col :span="6"
            ><el-form-item label="学科">
              <el-select
                placeholder="请选择"
                v-model="form.subjectID"
                @change="getSimpleDirectorys"
              >
                <el-option
                  v-for="item in subjectName"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="二级目录">
              <el-select placeholder="请选择" v-model="form.twoLevelDirectory">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in twoLevelDirectory"
                  :key="item.value"
                />
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="标签">
              <el-select placeholder="请选择" v-model="form.tags">
                <el-option
                  v-for="item in TagsList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="关键字">
              <el-input
                type="text"
                v-model.trim="form.keyword"
                placeholder="请输入题干"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"
            ><el-form-item label="试题类型">
              <el-select placeholder="请选择" v-model="form.questionType">
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="难度">
              <el-select placeholder="请选择" v-model="form.difficulty">
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="方向">
              <el-select placeholder="请选择" v-model="form.direction">
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="录入人">
              <el-select placeholder="请选择" v-model="form.creatorID">
                <el-option
                  v-for="item in creator"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"
            ><el-form-item label="题目备注">
              <el-input
                type="text"
                v-model="form.remarks"
                placeholder="请输入题目备注"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="企业简称">
              <el-input
                type="text"
                v-model="form.shortName"
                placeholder="请输入企业简称"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item label="城市" >
              <div class="option">
                <el-select
                  placeholder="请选择"
                  v-model="form.province"
                  @change="getCity"
                >
                  <el-option
                    v-for="(item, index) in provinceList"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </div>
              <div class="option">
                <el-select placeholder="请选择" v-model="form.city">
                  <el-option
                    v-for="(item, index) in citysLsit"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </div> </el-form-item
          ></el-col>
          <el-col :span="6"
            ><el-form-item>
              <div class="elButtonBtn">
                <el-button @click="clearFn">清除</el-button>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
              </div>
            </el-form-item></el-col
          >
        </el-row>
      </el-form>
      <!-- tabs面板 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-alert type="info" show-icon :closable="false" :title="'数据一共有'+total+'条'">
          <!-- <template> 数据一共有{{ total }}条 </template> -->
        </el-alert>
        <el-tab-pane label="全部" name="first"> </el-tab-pane>
        <el-tab-pane label="待审核" name="second"> </el-tab-pane>
        <el-tab-pane label="已审核" name="third"> </el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth"> </el-tab-pane>
      </el-tabs>
      <!-- 列表 -->
      <el-table :data="choiceList" style="width: 100%">
        <el-table-column
          prop="number"
          label="试题编号"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="90" align="center">
        </el-table-column>
        <el-table-column prop="catalog" label="科目" width="80" align="center">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          width="100"
          align="center"
          :formatter="transQuestionType"
        >
        </el-table-column>
        <el-table-column label="题干" width="250" align="center">
          <template slot-scope="scope">
            <p v-html="scope.row.question"></p>
          </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <span>
              {{ scope.row.addDate | formatTime }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          width="100"
          align="center"
          :formatter="transDifficulty"
        >
        </el-table-column>
        <el-table-column
          prop="creator"
          label="录入人"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="chkState"
          label="审核状态"
          width="100"
          align="center"
          :formatter="transChkState"
        >
        </el-table-column>
        <el-table-column
          prop="chkRemarks"
          label="审核意见"
          width="250"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="chkUser"
          label="审核人"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="publishState"
          label="发布状态"
          width="100"
          align="center"
          :formatter="transPublishState"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button @click="previewClick(scope.row)" type="text" size="small"
              >预览</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="checkDialogFn(scope.row)"
              :disabled="scope.row.chkState === 0 ? false : true"
              >审核</el-button
            >
            <!--  -->
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.publishState === 1 ? true : false"
              @click="onChange(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="upOrDownFn(scope.row)"
              >{{ scope.row.publishState === 1 ? "下架" : "上架" }}</el-button
            >
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.publishState === 1 ? true : false"
              @click="delFn(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="form.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="form.pagesize"
        layout="  prev, pager, next,sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 试题预览对话框 -->
    <el-dialog
      title="题目预览"
      :visible.sync="previewDialog"
      width="70%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <questions-preview :DetailsObj="detailsObj" />
      <div class="gbBtn">
        <el-button
          type="primary"
          @click="previewDialog = false"
          class="previewDialogBtn"
          >关闭</el-button
        >
      </div>
    </el-dialog>
    <!-- 题目审核弹框 -->
    <el-dialog
      v-if="checkDialog"
      title="题目审核"
      :visible.sync="checkDialog"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <questions-check :checkID="checkID" @close="closeCheckDialog" />
    </el-dialog>
  </div>
</template>

<script>
import {
  choice,
  detail as detailPreview,
  choicePublish,
  remove
} from '@/api/hmmm/questions.js'
import { simple as simpleSubject } from '@/api/hmmm/subjects.js'
import { simple as simpleTags } from '@/api/hmmm/tags.js'
import { simple as simpleDirectorys } from '@/api/hmmm/directorys.js'
import {
  difficulty,
  direction,
  questionType,
  chkType,
  publishType
} from '@/api/hmmm/constants.js'
import { list as userList } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys'
import dayjs from 'dayjs'
import QuestionsPreview from '../components/questions-preview-fx.vue'
import QuestionsCheck from '../components/questions-check.vue'
export default {
  name: 'QuestionsChoice',
  components: {
    QuestionsPreview,
    QuestionsCheck
  },
  // 时间处理   过滤器和dayjs方法
  filters: {
    formatTime (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  data () {
    //   自定义校验规则
    // const checkP = (rule, value, callback) => {
    //   if (!value) return callback(new Error('请选择地区'))
    //   callback()
    // }
    return {
      // // 表单数据
      form: {
        subjectID: null, // 学科ID
        twoLevelDirectory: null, // 二级目录
        tags: null, // 标签
        keyword: null, // 关键字
        questionType: null, // 试题类型
        difficulty: null, // 难度
        direction: null, // 方向
        creatorID: null, // 录入人
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        province: null, // 企业所在省份
        city: null, // 企业所在城市
        chkState: null // 审核状态
      },
      query: {
        page: 1, // 当前页码
        pagesize: 10 // 每页显示的条数
      },
      subjectName: [], // 学科名称
      twoLevelDirectory: [], // 二级目录
      TagsList: [], // 标签列表
      direction: direction, // 方向
      difficulty: difficulty, // 难度
      questionType: questionType, // 试题类型
      creator: [], // 录入人
      provinceList: [], // 城市
      citysLsit: [], // 城市下地区
      activeName: 'first',
      choiceList: [], // 题库列表
      total: 0, // 总页码
      previewDialog: false, // 试题预览弹弹框显示与隐藏
      detailsObj: {}, // 题目详情
      checkDialog: false, // 题目审核弹框显示与隐藏
      checkID: '', // 审核题目ID
      disabled: false,
      chkState: null,
      isSearch: false// 是否是搜索
    //   rules: {
    //     city: [
    //       { required: true, message: '请选择地区', trigger: 'change' },
    //       { validator: checkP, trigger: 'change' }
    //     ]
    //   }
    }
  },
  created () {
    //   调用获取精选题库列表的方法
    this.getChoiceList()
    // 调用获取学科简单列表的方法
    this.getSubjectsSimpleList()
    // 调用获取用户列表的方法
    this.getUserList()
    // 调用获取城市的方法
    this.provinceList = provinces()
  },
  methods: {
    //   删除
    async delFn (row) {
      // 分页处理
      if (this.choiceList.length === 1) {
        this.query.page--
        if (this.query.page <= 1) {
          this.query.page = 1
        }
      }
      console.log(row.id)
      const confirmRes = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmRes === 'cancel') return this.$message('取消删除')
      await remove({ id: row.id })
      this.$message.success('删除成功')
      this.getChoiceList()
    },
    //   上架 / 下架
    async upOrDownFn (row) {
      //   console.log(row.publishState) // 0表示是下架状态,页面显示上架   1表示上架状态,页面显示下架
      // 如果是0 表示后台数据是下架 当前页面显示的上架
      const confirmRes = await this.$confirm(
        `您确定${row.publishState === 0 ? '上架' : '下架'}此题目吗, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      if (confirmRes === 'cancel') {
        return this.$message(`取消${row.publishState === 0 ? '上架' : '下架'}`)
      } // 取消提示
      row.publishState = row.publishState === 0 ? 1 : 0 // 切换赋值
      await choicePublish({ id: row.id, publishState: row.publishState }) // 告诉后台切换上下架
      this.$message.success(`${row.publishState === 1 ? '上架' : '下架'}成功`) // 提示
      this.getChoiceList() // 更新列表
    },
    //  修改
    onChange (row) {
      // 携带当前题目的ID跳转到试题录入页面
      this.$router.push(`/questions/new?id=${row.id}`)
    },
    //   关闭弹框
    async closeCheckDialog () {
      // 更新列表
      this.getChoiceList()
      //   弹框关闭
      this.checkDialog = false
    },
    // 点击审核按钮
    async checkDialogFn (row) {
      this.checkDialog = true
      this.checkID = row.id
    },
    // 点击预览按钮
    async previewClick (row) {
      this.previewDialog = true
      const res = await detailPreview({ id: row.id })
      this.detailsObj = res.data
    },
    // currentPage 改变时会触发--前往多少页
    handleCurrentChange (page) {
      this.query.page = page
      this.getChoiceList()
    },
    // pageSize 每页条数改变时会触
    handleSizeChange (size) {
      this.query.pagesize = size
      this.getChoiceList()
    },
    // 切换tags
    async handleClick (tab) {
      this.query.page = 1
      if (tab.index === '0') {
        // 如果是全部
        this.chkState = null
        this.getChoiceList()
      } else {
        // 如果是其他状态
        this.chkState = tab.index - 1
        this.getChoiceList()
      }
    },
    //   获取精选题库列表的方法
    async getChoiceList () {
      if (this.isSearch) {
        const res = await choice({ ...this.form, chkState: this.chkState, ...this.query })
        this.choiceList = res.data.items
        this.total = res.data.counts // 总条数
      } else {
        const res = await choice({ chkState: this.chkState, ...this.query })
        this.choiceList = res.data.items
        this.total = res.data.counts // 总条数
      }
    },
    //   搜索按钮
    async onSubmit () {
      this.isSearch = true
      this.query.page = 1
      //   this.form.keyword = this.form.keyword.trim()
      this.getChoiceList()
    //   this.isSearch = false
    },
    //   清除按钮
    clearFn () {
      this.isSearch = false
      this.form = {}
      this.getChoiceList()
    },
    //   获取城市下地区的方法
    getCity () {
      this.citysLsit = citys(this.form.province)
    },
    //   获取用户列表
    async getUserList () {
      const res = await userList()
      this.creator = res.data.list
    },
    //   获取二级目录和标签
    async getSimpleDirectorys () {
      const subjectID = this.form.subjectID
      //   获取二级目录
      const res = await simpleDirectorys({ subjectID })
      this.twoLevelDirectory = res.data
      // 获取标签
      const res1 = await simpleTags({ subjectID })
      this.TagsList = res1.data
    },
    //   获取学科简单列表
    async getSubjectsSimpleList () {
      const id = this.form.subjectID
      const res = await simpleSubject({ id })
      this.subjectName = res.data
    },
    //   发布状态处理
    transPublishState (row, column, cellValue, index) {
      // 如果后台返回的是状态是已审核
      if (row.chkState === 1) {
        //   发布状态为待发布
        if (cellValue === 0) {
          // 将发布状态改为2  应该显示为已下架
          cellValue = 2
          const res = publishType.find((item) => item.value === cellValue + 1)
          return res.label
        } else if (cellValue === 1) {
          // 如果后台返回的发布状态为1 已发布
          const res = publishType.find((item) => item.value === cellValue + 1)
          return res.label
        }
      } else {
        // 如果后台返回的
        return '待发布'
      }
    },
    //   题型数据处理
    transQuestionType (row, column, cellValue, index) {
      const res = questionType.find((item) => item.value === Number(cellValue))
      return res ? res.label : '未知'
    },
    // 难度数据处理
    transDifficulty (row, column, cellValue, index) {
      const res = difficulty.find((item) => item.value === Number(cellValue))
      return res ? res.label : '未知'
    },
    // 审核状态
    transChkState (row, column, cellValue, index) {
      const res = chkType.find((item) => item.value === cellValue + 1)
      return res ? res.label : ''
    }
  }
}
</script>

<style scoped >

.sbtn{
margin-right: 10px;
}
.el-card {
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  margin: 10px;
}
.el-form-item {
  display: inline-block;
}
.btn_wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.remark {
  font-size: 12px;
  color: pink;
}
.btn_wrapper .el-button {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
  font-size: 12px;
  border-radius: 3px;
}
.option {
  width: 96.5px;
  display: inline-block;
}
.el-input {
  width: 193px;
}
.gbBtn[data-v-2c9827a4] {
  width: 100%;
  padding-left: 70px;
}
.elButtonBtn {
  margin-left: 42px;
}
.el-pagination {
 float: right;
}
.previewDialogBtn{
    position: absolute;
    bottom: 20px;
    right: 20px;
}
.elrow {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 20px;
}

</style>
